<template>
  <view class="publish-button">
    <button
      :disabled="disabled"
      :style="{ backgroundColor: disabled ? '' : '#f8d957' }"
      size="mini"
      @click="reLease"
    >
      发布
    </button>
  </view>
  <!-- 展示图片 -->
  <view class="fillout-input" v-if="fileType == 'image'">
    <view class="init-uploader">
      <view v-for="(item, index) in fileList" :key="index">
        <image :src="item.tempFilePath" mode="aspectFill"></image>
        <image
          class="delete-Img"
          @click="beforeDelete(index)"
          src="/static/icon/companion/shanchu.png"
          mode="widthFix"
        ></image>
      </view>
      <view @click="uploadImage()" v-if="fileList.length < 8">
        <image src="/static/icon/companion/shangchuan.png" mode="aspectFill"></image>
      </view>
    </view>
  </view>
  <!-- 展示视频 -->
  <view class="fillout-input" v-if="fileType == 'video'">
    <view class="video-view" v-for="(item, index) in fileList" :key="index">
      <video
        enable-play-gesture
        object-fit="cover"
        controls
        :poster="item.thumbTempFilePath"
        :src="item.tempFilePath"
      ></video>
      <image
        class="delete-Img"
        @click="beforeDelete(index)"
        src="/static/icon/companion/shanchu.png"
        mode="widthFix"
      ></image>
      <text @click="uploadImage(1, 'image', '002')">选封面</text>
    </view>
  </view>
  <view class="fillout-input">
    <input type="text" v-model="title" :cursor-spacing="30" placeholder="好的标题更容易被推荐" />
  </view>
  <view class="fillout-input" v-if="!showSelect">
    <textarea
      :maxlength="300"
      :cursor-spacing="30"
      @blur="blurEvent"
      v-model="describe.value"
      placeholder="分享有趣或想吐槽的经历,帮助更多热爱旅行的人"
    />
  </view>
  <view class="fillout-input personal-view global-display global-a-items">
    <text>你在哪里</text>
    <input type="text" disabled v-model="poiname" @click="chooseLocation" />
    <image src="/static/icon/personal-Data/jiantou-you.png" mode="widthFix"></image>
  </view>
  <!-- 已添加的标签 -->
  <view class="fillout-input location-view" v-if="myLabel.length > 0">
    <text class="tag-Text">还可添加{{ numberTags - myLabel.length }}个标签</text>
    <view class="global-display global-f-wrap global-a-items">
      <text
        class="vanTag selectTag"
        v-for="(item, index) in myLabel"
        :key="index"
        @click="close(index, item)"
      >
        {{ item }}
      </text>
    </view>
  </view>
  <!-- 选择标签 -->
  <view class="fillout-input location-view">
    <text class="tag-Text">推荐标签</text>
    <view class="global-display global-f-wrap global-a-items">
      <text
        class="vanTag"
        v-for="(item, index) in recLabel"
        :key="index"
        :style="getStyle(item)"
        @click="addTag(item)"
      >
        {{ item.name }}
      </text>
      <text class="customizeTag" @click="tagTrue = true">+ 自定义标签</text>
    </view>
  </view>
  <!-- 自定义标签弹窗 -->
  <view class="Custom-tag" v-if="tagTrue" @click="tagTrue = false">
    <view @click.stop="">
      <input
        type="text"
        placeholder="请输入自定义标签"
        :maxlength="6"
        v-model="customTag"
        :cursor-spacing="15"
        @confirm="tagConfirm"
        @blur="tagTrue = false"
        focus
      />
    </view>
  </view>
  <!-- 选择发图文或视频 -->
  <view class="video-image" v-if="showSelect" @click.self="showSelect = false">
    <view class="select-sheet">
      <text class="select-title">选择发布类型</text>
      <view class="option-list">
        <view class="option-card" @click="uploadImage(9, 'image')">
          <image src="/static/icon/companion/shangchuan.png" mode="aspectFill"></image>
          <text>发图文</text>
        </view>
        <view class="option-card" @click="uploadImage(1, 'video')">
          <image src="/static/icon/index/duanshipin.png" mode="aspectFill"></image>
          <text>发视频</text>
        </view>
      </view>
      <view class="tips-list">
        <text class="tips-item">图片：最多选择 9 张，自动压缩后上传</text>
        <text class="tips-item">视频：最多选择 1 个，大小不超过 30MB</text>
      </view>
    </view>
  </view>
  <!-- 上传中或上传成功提示 -->
  <view class="uoload-view" v-if="uploadCourse">
    <progress
      activeColor="#f8d957"
      :percent="percEnt"
      active
      :stroke-width="20"
      :duration="10"
      border-radius="4"
      active-mode="forwards"
    />
    <text class="upload-Progress-tips">{{ uploadTips }}</text>
    <view class="upload-Thankyou">
      <text>感谢你的分享</text>
      <image :src="previewImage" mode="aspectFill"></image>
      <text v-if="uploadComplete" @click="uploadCourse = false">完成</text>
    </view>
  </view>
  <view style="height: 300rpx"></view>
</template>

<script lang="ts" setup>
import { reactive, ref, watchEffect } from 'vue'
import { upLoadCos } from '@/utils/cos'
import { getPublishKeywords, publishImageTravelAPI, publishVideoTravelAPI } from '@/api/publish'
import { checkLoginAPI } from '@/api/global'
// @ts-ignore
import { addressCity } from '@/utils/qq-Location'
// 新增：声明媒体类型联合类型
type MediaType = 'image' | 'video' | 'mix'
// 显示//隐藏文件选择弹窗
const showSelect = ref(true)
// 游记标题
const title = ref('')
// 游记内容
const describe = reactive({ value: '' })
// 存储图片或视频
const fileList = ref<{tempFilePath: string, thumbTempFilePath: string, width: number, height: number}[]>([])
// 判断上传的是图片还是视频
const fileType = ref<MediaType>('image')
// 取出一张图片作为上传的展示
const previewImage = ref('')
// 上传图片或视频
async function uploadImage(count = 9, type:MediaType = 'image', poster = '001') {
  wx.showLoading({ title: '上传中', mask: true })
  wx.chooseMedia({
    count,
    mediaType: [type],
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: async res => {
      if (poster === '001') {
        fileType.value = res.type as MediaType
        if (res.type === 'video') {
          if (res.tempFiles[0].size > 31457280) {
            wx.showToast({
              title: '视频文件太大',
              icon: 'none',
              duration: 1000,
            })
            return false
          }
        }
        res.tempFiles.forEach(item => {
          fileList.value.push(item)
        })
        showSelect.value = false
      } else {
        // 如果上传了视频封面图
        fileList.value[0].thumbTempFilePath = res.tempFiles[0].tempFilePath
      }
      previewImage.value =
        fileType.value === 'image'
          ? fileList.value[0].tempFilePath
          : fileList.value[0].thumbTempFilePath
      wx.hideLoading()
    },
    fail: err => {
      wx.hideLoading()
    },
  })
}
// 删除指定的图片,视频
function beforeDelete(index: number) {
  fileList.value.splice(index, 1)
}
// 如果存储的文件为空数组，则弹出上传选择框
watchEffect(() => {
  if (fileList.value.length <= 0) {
    showSelect.value = true
  }
})
// 选中的市和位置
const cityname = ref('淮北市')
const poiname = ref('濉溪县')
const province = ref('安徽省淮北市')
// 选择目的地
function chooseLocation() {
  wx.chooseLocation({
    success: async res => {
      const cityData = await addressCity(res.latitude, res.longitude)
      cityname.value = cityData.city
      poiname.value = res.name
      province.value = res.address
    },
    fail: err => {
      console.log(err)
    },
  })
}
// 推荐标签
const recLabel = ref<{ name: string; active: boolean }[]>([])
// 我选中的标签
const myLabel = ref<string[]>([])
// 设置可以添加几个标签
const numberTags = ref(10)
// 自定义标签
const customTag = ref('')
// 自定义标签弹窗:显示||隐藏
const tagTrue = ref(false)
// 写文章失去焦时触发：分析文章关键词
async function blurEvent() {
  if (describe.value == '') return false
  const res = await getPublishKeywords(describe.value)
  console.log(res)
  if (res.data.length > 0) {
    res.data.forEach(item => {
      if (!recLabel.value.some(el => el.name === item)) {
        recLabel.value.push({ name: item, active: false })
      }
    })
  }
}
function getStyle(item: {name: string, active: boolean}) {
  return {
    color: item.active ? '#ffffff' : '#000000',
    'background-color': item.active ? '#ec6f97' : '#f3f4f6',
  }
}
// 添加标签
function addTag(tag: {name: string, active: boolean}) {
  if (myLabel.value.length >= 10) {
    wx.showToast({ title: '最多只能添加10个标签', icon: 'none', duration: 800 })
    return
  }
  if (!tag.active) {
    myLabel.value.push(tag.name)
    // 设置标签为选中状态
    tag.active = true
  }
}
// 删除标签
function close(index: number, tag: string) {
  myLabel.value.splice(index, 1)
  // 设置标签为未选中状态
  const recTag = recLabel.value.find(item => item.name === tag)
  if (recTag) {
    recTag.active = false
  }
}
// 选择自定义标签触发
function tagConfirm() {
  tagTrue.value = false
  if (myLabel.value.length >= 10) {
    wx.showToast({ title: '最多只能添加10个标签', icon: 'none', duration: 800 })
    return
  }
  if (customTag.value == '') return
  const res_a = myLabel.value.find(item => item === customTag.value)
  if (res_a) {
    wx.showToast({ title: '相同标签只能存在一个', icon: 'none', duration: 800 })
    return false
  }
  const res_b = recLabel.value.find(item => item.name === customTag.value)
  if (res_b) {
    wx.showToast({ title: '推荐标签已存在', icon: 'none', duration: 800 })
    return false
  }
  myLabel.value.push(customTag.value)
}
// 监听必填值是否填写完毕
const disabled = ref(true)
watchEffect(() => {
  const hasData =
    title.value && describe.value && fileList.value.length > 0 && myLabel.value.length > 0
  disabled.value = hasData ? false : true
})
// 发布
const uploadCourse = ref(false) //显示隐藏上传提示页面
const uploadTips = ref('上传中...请勿退出该页面')
const uploadComplete = ref(false) //显示隐藏完成按钮
const percEnt = ref(80) //进度
async function reLease() {
  // 登录校验
  try {
    await checkLoginAPI()
  } catch (e) {
    wx.showToast({ title: '请先登录', icon: 'none', duration: 1000 })
    return
  }
  uploadComplete.value = false
  percEnt.value = 80
  uploadTips.value = '上传中...请勿退出该页面'
  uploadCourse.value = true
  // 判断上传图片还是视频类型
  if (fileType.value === 'image') {
    //图片
    try {
      const upLoadRes = await upLoadCos(fileList.value)
      const param = {
        title: title.value,
        content: describe.value,
        city: cityname.value,
        address: poiname.value,
        province: province.value,
        tag: myLabel.value,
        image: upLoadRes,
      }
      await publishImageTravelAPI(param)
      clearData()
    } catch (err) {
      uploadTips.value = '上传失败！'
      uploadComplete.value = true
    }
  } else {
    //视频
    try {
      // 1先上传封面图2上传视频
      const upLoadPost = await upLoadCos([{ tempFilePath: fileList.value[0].thumbTempFilePath }])
      const upLoadVideo = await upLoadCos(fileList.value)
      const param = {
        title: title.value,
        content: describe.value,
        city: cityname.value,
        address: poiname.value,
        province: province.value,
        tag: myLabel.value,
        videoPoster: upLoadPost[0],
        videoUrl: upLoadVideo[0],
        videoWidth: fileList.value[0].width,
        videoHeight: fileList.value[0].height,
      }
      await publishVideoTravelAPI(param)
      clearData()
    } catch (err) {
      uploadTips.value = '上传失败！'
      uploadComplete.value = true
    }
  }
}
// 上传成功清空数据
function clearData() {
  title.value = ''
  describe.value = ''
  myLabel.value = []
  recLabel.value = []
  fileList.value = []
  uploadTips.value = '上传成功'
  uploadComplete.value = true
  percEnt.value = 100
}
</script>

<style scoped>
.publish-button {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx;
}
.publish-button button {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  margin: 0 !important;
}
.fillout-input {
  margin: 0 20rpx;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #f2f2f2;
}
.fillout-input textarea {
  width: 100%;
}
.video-view {
  position: relative;
}
.video-view video {
  width: 100%;
  height: 420rpx;
  background-color: #000;
}
.video-view text {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0, 0.3);
  padding: 10rpx 20rpx;
  color: #ffffff;
}
.init-uploader {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 6rpx;
}
.init-uploader view {
  height: 170rpx;
  overflow: hidden;
  position: relative;
}
.init-uploader image:nth-child(1) {
  width: 100%;
  height: 170rpx;
}
.delete-Img {
  position: absolute;
  width: 40rpx;
  top: -8rpx;
  right: -8rpx;
}
.vanTag {
  margin: 20rpx 20rpx 0 0;
  border-radius: 40rpx;
  padding: 7rpx 22rpx;
}
.selectTag {
  color: #ffffff;
  background-color: #ec6f97;
}
.customizeTag {
  color: rgb(236, 111, 151);
  border: 2rpx solid rgb(236, 111, 151);
  border-radius: 40rpx;
  padding: 7rpx 22rpx;
  margin: 20rpx 20rpx 0 0;
}
.tag-Text {
  color: #bbb;
  font-size: 32rpx;
  font-weight: bold;
}
.personal-view text {
  width: 150rpx;
  font-size: 32rpx;
  font-weight: bold;
}
.personal-view image {
  width: 30rpx;
}
.personal-view input,
picker {
  flex: 1;
  color: #ffd01e;
  font-weight: bold;
}
.video-image {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 99;
}
.video-image .legacy-panel {
  height: 350rpx;
  background-color: azure;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* legacy button styles (unused) */
.video-image .legacy-btn {
  background-color: #f8d957;
  font-size: 30rpx;
  text-align: center;
  display: inline-block;
  padding: 20rpx 150rpx;
  margin: 20rpx 0;
  border-radius: 40rpx;
}
/* 新的清新选择面板样式 */
.select-sheet {
  height: auto;
  min-height: 460rpx;
  background: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top-left-radius: 32rpx;
  border-top-right-radius: 32rpx;
  padding: 32rpx 28rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.select-title {
  font-size: 30rpx;
  color: #666666;
  text-align: center;
  margin-bottom: 24rpx;
  background: transparent;
  padding: 0;
}
.option-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24rpx;
}
.option-card {
  background: #f7fafc;
  border-radius: 20rpx;
  padding: 28rpx 18rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
}
.option-card image {
  width: 96rpx;
  height: 96rpx;
  margin-bottom: 14rpx;
  border-radius: 16rpx;
}
.option-card text {
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 30rpx;
  color: #111111;
}
.tips-list {
  margin-top: 20rpx;
  background: #f7f7f7;
  border-radius: 16rpx;
  padding: 18rpx 20rpx;
}
.tips-item {
  background: transparent;
  color: #666666;
  font-size: 26rpx;
  line-height: 1.6;
}
.Custom-tag input {
  background-color: #f2f2f2;
  height: 100rpx;
  border-radius: 10rpx;
  padding: 0 10rpx;
}
/* 上传中提示 */
.uoload-view {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8rpx);
  z-index: 999;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.uoload-view progress {
  width: 70%;
}
.upload-Progress-tips {
  text-align: center;
  padding: 20rpx 0;
  color: #ffffff;
  margin-bottom: 10rpx;
}
.upload-Thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx;
  margin-top: 20rpx;
  color: #333333;
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  width: 650rpx;
  max-width: 90%;
}
.upload-Thankyou image {
  width: 320rpx;
  height: 320rpx;
  border-radius: 16rpx;
  margin: 24rpx 0;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
}
.upload-Thankyou text:nth-child(1) {
  font-size: 36rpx;
  font-weight: 600;
  color: #111111;
}
.upload-Thankyou text:nth-child(3) {
  background-color: #f8d957;
  border-radius: 16rpx;
  padding: 20rpx 0;
  color: #333333;
  font-size: 32rpx;
  width: 100%;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(248, 217, 87, 0.5);
}
.uoloadErr {
}
</style>
